<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Page Lifecycle</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/page-lifecycle/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Page Lifecycle</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/page-lifecycle/">https://wicg.github.io/page-lifecycle/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:panicker@google.com">Shubhie Panicker</a> (<a class="p-org org" href="https://google.com">Google</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:d@domenic.me">Domenic Denicola</a> (<a class="p-org org" href="https://google.com">Google</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Page Lifecycle Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document defines an API that supports browsers' ability to manage lifecycle of web pages.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#sec-lifecycle-states"><span class="secno">2</span> <span class="content">Page Lifecycle States</span></a>
    <li>
     <a href="#sec-api"><span class="secno">3</span> <span class="content">API</span></a>
     <ol class="toc">
      <li><a href="#example"><span class="secno">3.1</span> <span class="content">Usage example</span></a>
     </ol>
    <li><a href="#feature-policies"><span class="secno">4</span> <span class="content">Feature Policies</span></a>
    <li>
     <a href="#sec-processing-model"><span class="secno">5</span> <span class="content">Processing model</span></a>
     <ol class="toc">
      <li><a href="#worklets-workers"><span class="secno">5.1</span> <span class="content">Modifications to worklet and worker behavior</span></a>
      <li>
       <a href="#mod"><span class="secno">5.2</span> <span class="content">Modifications to the HTML Standard</span></a>
       <ol class="toc">
        <li><a href="#html-bfcache-dfn"><span class="secno">5.2.1</span> <span class="content"><span>Unloading documents</span> and <span>history traversal</span></span></a>
        <li><a href="#html-html-event-loop-definitions"><span class="secno">5.2.2</span> <span class="content"><span>Event loop: definitions</span></span></a>
        <li><a href="#html-event-loop"><span class="secno">5.2.3</span> <span class="content"><span>Event loop: processing model</span></span></a>
        <li><a href="#html-discarding"><span class="secno">5.2.4</span> <span class="content"><span>Discarding browsing contexts</span></span></a>
        <li><a href="#html-initialize-doc"><span class="secno">5.2.5</span> <span class="content"><span>Initialize the document</span></span></a>
        <li><a href="#html-iframe-load"><span class="secno">5.2.6</span> <span class="content"><span>iframe load event steps</span></span></a>
        <li><a href="#html-media-elements"><span class="secno">5.2.7</span> <span class="content"><code class="idl"><span>HTMLMediaElement</span></code></span></a>
        <li><a href="#html-post-message"><span class="secno">5.2.8</span> <span class="content"><span>Posting messages</span></span></a>
       </ol>
      <li>
       <a href="#serviceworker-mod"><span class="secno">5.3</span> <span class="content">Modifications to the Service Worker Standard</span></a>
       <ol class="toc">
        <li>
         <a href="#serviceworker-client-dfn"><span class="secno">5.3.1</span> <span class="content"><span><code>Client</code></span></span></a>
         <ol class="toc">
          <li><a href="#service-worker-client-lifecycle-state"><span class="secno">5.3.1.1</span> <span class="content"><code class="idl"><span>lifecycleState</span></code></span></a>
          <li><a href="#serviceworker-matchall-dfn"><span class="secno">5.3.1.2</span> <span class="content"><span><code>matchAll(options)</code></span></span></a>
          <li><a href="#serviceworker-openwindow-dfn"><span class="secno">5.3.1.3</span> <span class="content"><span><code>openWindow(url)</code></span></span></a>
         </ol>
        <li>
         <a href="#serviceworker-algorithms-dfn"><span class="secno">5.3.2</span> <span class="content"><span>Algorithms</span></span></a>
         <ol class="toc">
          <li><a href="#get-client-lifecycle-state-algorithm"><span class="secno">5.3.2.1</span> <span class="content"><span>Get Client Lifecycle State</span></span></a>
          <li><a href="#serviceworker-createclient-dfn"><span class="secno">5.3.2.2</span> <span class="content"><span>Create Client</span></span></a>
          <li><a href="#serviceworker-createwindowclient-dfn"><span class="secno">5.3.2.3</span> <span class="content"><span>Create Window Client</span></span></a>
         </ol>
       </ol>
      <li>
       <a href="#page-lifecycle"><span class="secno">5.4</span> <span class="content">Page lifecycle processing model</span></a>
       <ol class="toc">
        <li><a href="#frozenness-state"><span class="secno">5.4.1</span> <span class="content">FROZENNESS state</span></a>
        <li><a href="#changing-frozenness"><span class="secno">5.4.2</span> <span class="content">Changing the frozenness of documents</span></a>
        <li><a href="#discarding"><span class="secno">5.4.3</span> <span class="content">Discarding</span></a>
       </ol>
     </ol>
    <li><a href="#acknowledgements"><span class="secno">6</span> <span class="content">Acknowledgements</span></a>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
    With large numbers of web apps (and tabs) running, critical resources such as memory, CPU, battery, network, etc. easily get oversubscribed, leading to a bad end-user experience. Application lifecycle is a key way that modern OSs manage resources. 
   <p>For a platform to support application lifecycle, it needs to:</p>
   <ul>
    <li data-md>
     <p>provide developers with signals about transitions between the lifecycle states</p>
    <li data-md>
     <p>provide lifecycle-compatible APIs that allow key capabilities to work even when the app is backgrounded or stopped.</p>
   </ul>
   <p>This proposal attempts to define what the lifecycle of a web page is and add needed extensions to enable web applications to respond to two important lifecycle events commonly performed by user agents:</p>
   <ul>
    <li data-md>
     <p>Tab discarding (for memory saving)</p>
    <li data-md>
     <p>CPU suspension (for battery, data, CPU saving)</p>
   </ul>
   <h2 class="heading settled" data-level="2" id="sec-lifecycle-states"><span class="secno">2. </span><span class="content">Page Lifecycle States</span><a class="self-link" href="#sec-lifecycle-states"></a></h2>
   <p>This spec defines what the lifecycle of a web page is and adds extensions to enable web applications to respond to two important lifecycle events commonly performed by user agents:</p>
   <ul>
    <li data-md>
     <p>CPU suspension (for conserving battery, data, CPU)</p>
    <li data-md>
     <p>Tab discarding (for memory saving)</p>
   </ul>
   <p>This spec formalizes two new lifecycle states to support the above:</p>
   <ul>
    <li data-md>
     <p>Frozen: lifecycle state for CPU suspension. This means that the <a data-link-type="dfn" href="#freeze-steps" id="ref-for-freeze-steps">freeze steps</a> algorithm was called on the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc" id="ref-for-concept-document-bc">browsing context</a>. Normally HIDDEN pages will be <a data-link-type="dfn" href="#frozen" id="ref-for-frozen">frozen</a> to conserve resources.</p>
    <li data-md>
     <p>Discarded: means that the <a data-link-type="dfn" href="#discarded" id="ref-for-discarded">discard</a> algorithm was called on the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc" id="ref-for-concept-document-bc①">browsing context</a>. Normally <a data-link-type="dfn" href="#frozen" id="ref-for-frozen①">frozen</a> frames will be moved to the discarded state to conserve resources.</p>
   </ul>
   <p>TODO(panicker): Insert diagram</p>
   <h2 class="heading settled" data-level="3" id="sec-api"><span class="secno">3. </span><span class="content">API</span><a class="self-link" href="#sec-api"></a></h2>
   <p>Page Lifecycle involves the following additions:</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②"><c- g>Document</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-document-onfreeze" id="ref-for-dom-document-onfreeze"><c- g>onfreeze</c-></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-document-onresume" id="ref-for-dom-document-onresume"><c- g>onresume</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-document-wasdiscarded" id="ref-for-dom-document-wasdiscarded"><c- g>wasDiscarded</c-></a>;
};
</pre>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-onfreeze"><code>onfreeze</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-onresume"><code>onresume</code></dfn> attributes are <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes" id="ref-for-event-handler-idl-attributes">event handler IDL attributes</a> for the <code>freeze</code> and <code>resume</code> events, respectively.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-wasdiscarded"><code>wasDiscarded</code></dfn> attribute’s getter must return the value of this <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code>'s <a data-link-type="dfn" href="#document-discarded" id="ref-for-document-discarded">discarded</a> boolean.</p>
   <p class="note" role="note"><span>NOTE:</span> these APIs are added on <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code>, instead of on <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code>, for consistency with the Page Visibility API; we expect these APIs to be used in tandem with that existing one. <a data-link-type="biblio" href="#biblio-page-visibility">[PAGE-VISIBILITY]</a></p>
   <p class="note" role="note"><span>NOTE:</span> In addition <a href="https://github.com/whatwg/html/issues/3378"><code>clientId</code> and <code>discardedClientId</code></a> will be added to <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①">Window</a></code>, to support restoring view state when user revisits a discarded page, causing a reload. We expect those to be used by code that reacts to these events.</p>
   <h3 class="heading settled" data-level="3.1" id="example"><span class="secno">3.1. </span><span class="content">Usage example</span><a class="self-link" href="#example"></a></h3>
   <p>Example of handling freeze and resume:</p>
<pre class="example highlight" id="example-edb6c132"><a class="self-link" href="#example-edb6c132"></a><c- kr>const</c-> prepareForFreeze <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  <c- c1>// Close any open IndexedDB connections.</c->
  <c- c1>// Release any web locks.</c->
  <c- c1>// Stop timers or polling.</c->
<c- p>};</c->

<c- kr>const</c-> reInitializeApp <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  <c- c1>// Restore IndexedDB connections.</c->
  <c- c1>// Re-acquire any needed web locks.</c->
  <c- c1>// Restart timers or polling.</c->
<c- p>};</c->

document<c- p>.</c->addEventListener<c- p>(</c-><c- t>'freeze'</c-><c- p>,</c-> prepareForFreeze<c- p>);</c->
document<c- p>.</c->addEventListener<c- p>(</c-><c- t>'resume'</c-><c- p>,</c-> reInitializeApp<c- p>);</c->
</pre>
   <p>Example of restoring view state after discard:
A user could have multiple tabs open for the same app &amp; URL. If they are both in the background and are both discarded, then the app would need to distinguish between the two tabs to restore the correct state. clientId and lastClientId on the Window can be used for this purpose.</p>
<pre class="example highlight" id="example-e35b9ec1"><a class="self-link" href="#example-e35b9ec1"></a><c- c1>// Persists state to IndexedDB, making sure to set the current value of</c->
<c- c1>// </c-><code class="highlight"><c- c1>self<c- p>.</c->clientId</c-></code><c- c1> on the record, so it can be retrieved later using</c->
<c- c1>// </c-><code class="highlight"><c- c1>getPersistedState<c- p>()</c-></c-></code><c- c1> (if the tab has to be reloaded after a discard).</c->
<c- kr>const</c-> persistState <c- o>=</c-> async <c- p>(</c->state<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
  <c- kr>const</c-> record <c- o>=</c-> <c- p>{...</c->state<c- p>,</c-> cliendId<c- o>:</c-> self<c- p>.</c->clientId<c- p>};</c->

  <c- c1>// Persist record to IndexedDB or SessionStorage....</c->
<c- p>}</c->

<c- c1>// Retrieves the state record from IndexedDB based on the passed client ID.</c->
<c- kr>const</c-> getPersistedState <c- o>=</c-> async <c- p>(</c->clientId<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
  <c- c1>// Lookup record in IndexedDB...</c->
<c- p>};</c->

<c- c1>// If the tab was previously discarded, get the persisted state for the</c->
<c- c1>// client ID of the discarded tab via </c-><code class="highlight"><c- c1>self<c- p>.</c->lastClientId</c-></code><c- c1>.</c->
<c- k>if</c-> <c- p>(</c->document<c- p>.</c->wasDiscarded<c- p>)</c-> <c- p>{</c->
  getPersistedState<c- p>(</c->self<c- p>.</c->lastClientId<c- p>);</c->
<c- p>}</c->
</pre>
   <h2 class="heading settled" data-level="4" id="feature-policies"><span class="secno">4. </span><span class="content">Feature Policies</span><a class="self-link" href="#feature-policies"></a></h2>
    Controlling the execution state of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context">nested browsing contexts</a> is desirable from a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc" id="ref-for-concept-document-bc②">browsing context</a> in order to control
the user experience. An application may desire that when a document is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered" id="ref-for-being-rendered">being rendered</a> or does not intersect the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS2/visuren.html#viewport" id="ref-for-viewport">viewport</a> that all execution stops in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context①">nested browsing context</a> (including currently playing video, audio). Stopping all execution
can lead to an improvement in CPU utilization. To meet these needs, two feature policies are defined: 
   <ul>
    <li data-md>
     <p>"<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="execution-while-not-rendered"><code>execution-while-not-rendered</code></dfn>", which has a <a data-link-type="dfn" href="https://wicg.github.io/feature-policy/#default-allowlist" id="ref-for-default-allowlist">default allowlist</a> of <code>*</code></p>
    <li data-md>
     <p>"<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="execution-while-out-of-viewport"><code>execution-while-out-of-viewport</code></dfn>", which has a <a data-link-type="dfn" href="https://wicg.github.io/feature-policy/#default-allowlist" id="ref-for-default-allowlist①">default allowlist</a> of <code>*</code></p>
   </ul>
   <p>The "<a data-link-type="dfn" href="#execution-while-not-rendered" id="ref-for-execution-while-not-rendered"><code>execution-while-not-rendered</code></a>" policy controls whether
tasks should execute for <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context②">nested browsing contexts</a> whose <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container" id="ref-for-browsing-context-container">browsing context container</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered" id="ref-for-being-rendered①">being rendered</a>.</p>
   <p>The "<a data-link-type="dfn" href="#execution-while-out-of-viewport" id="ref-for-execution-while-out-of-viewport"><code>execution-while-out-of-viewport</code></a>" policy controls whether
tasks should execute for <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context③">nested browsing contexts</a> whose <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container" id="ref-for-browsing-context-container①">browsing context container</a> does not intersect the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS2/visuren.html#viewport" id="ref-for-viewport①">viewport</a> according
to <a data-link-type="dfn" href="https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo" id="ref-for-calculate-intersection-rect-algo">compute the intersection of a target element and the root</a>.</p>
   <p><a href="#mod">§ 5.2 Modifications to the HTML Standard</a> accomplishes this by placing the document (and its decendants) in a <a data-link-type="dfn" href="#frozen" id="ref-for-frozen②">frozen</a> state when the following
conditions have been met:</p>
   <ul>
    <li data-md>
     <p>the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#iframe-load-event-steps" id="ref-for-iframe-load-event-steps">iframe load event steps</a> have been run;</p>
    <li data-md>
     <p>the policy is disabled for the document; and</p>
    <li data-md>
     <p>the relevant policy condition applies (not rendered or scrolled out of view).</p>
   </ul>
   <p>If these conditions aren’t met, the document will be in the <a data-link-type="dfn" href="#unfrozen" id="ref-for-unfrozen">unfrozen</a> state.</p>
<pre class="example highlight" id="example-fa17f32b"><a class="self-link" href="#example-fa17f32b"></a><c- c>&lt;!-- The iframe will be frozen immediately after it is loaded. --></c->

<c- p>&lt;</c-><c- f>iframe</c-> <c- e>allow</c-><c- o>=</c-><c- s>"execution-while-not-rendered 'none'"</c->
  <c- e>src</c-><c- o>=</c-><c- s>"subframe.html"</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:none"</c-><c- p>>&lt;/</c-><c- f>iframe</c-><c- p>></c->
</pre>
   <div class="algorithm" data-algorithm="update document frozenness steps">
     To run the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="update-document-frozenness-steps">update document frozenness steps</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code> <var>document</var>: 
    <ol>
     <li data-md>
      <p>If <var>document</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc" id="ref-for-concept-document-bc③">browsing context</a> is not a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context④">nested browsing context</a>, then return.</p>
     <li data-md>
      <p>If <var>document</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#current-document-readiness" id="ref-for-current-document-readiness">readiness</a> is not "<code>complete</code>", then return.</p>
     <li data-md>
      <p>Let <var>element</var> be <var>document</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc" id="ref-for-concept-document-bc④">browsing context</a>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container" id="ref-for-browsing-context-container②">browsing context container</a>.</p>
     <li data-md>
      <p>Let <var>frozenness</var> be false.</p>
     <li data-md>
      <p>Let <var>auto resume media</var> be false.</p>
     <li data-md>
      <p>If <var>document</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use" id="ref-for-allowed-to-use">allowed to use</a> the "<a data-link-type="dfn" href="#execution-while-not-rendered" id="ref-for-execution-while-not-rendered①"><code>execution-while-not-rendered</code></a>" feature, then:</p>
      <ol>
       <li data-md>
        <p>If <var>element</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered" id="ref-for-being-rendered②">being rendered</a>,  set <var>frozenness</var> to true.</p>
      </ol>
     <li data-md>
      <p>Otherwise if <var>document</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use" id="ref-for-allowed-to-use①">allowed to use</a> the "<a data-link-type="dfn" href="#execution-while-out-of-viewport" id="ref-for-execution-while-out-of-viewport①"><code>execution-while-out-of-viewport</code></a>" feature, then:</p>
      <ol>
       <li data-md>
        <p>If <var>element</var> does not intersect the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS2/visuren.html#viewport" id="ref-for-viewport②">viewport</a> according to <a data-link-type="dfn" href="https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo" id="ref-for-calculate-intersection-rect-algo①">compute the intersection of a target element and the root</a>, set <var>frozenness</var> to true and set <var>auto resume media</var> to true.</p>
      </ol>
     <li data-md>
      <p>If <var>frozenness</var> does not equal <var>document</var>’s <a data-link-type="dfn" href="#document-frozenness" id="ref-for-document-frozenness">frozenness</a> state, <a data-link-type="dfn" href="#change-the-frozenness-of-a-document" id="ref-for-change-the-frozenness-of-a-document">change the frozenness of a document</a> given <var>document</var>, <var>frozenness</var>, and <var>auto resume media</var>.</p>
    </ol>
   </div>
   <h2 class="heading settled" data-level="5" id="sec-processing-model"><span class="secno">5. </span><span class="content">Processing model</span><a class="self-link" href="#sec-processing-model"></a></h2>
   <h3 class="heading settled" data-level="5.1" id="worklets-workers"><span class="secno">5.1. </span><span class="content">Modifications to worklet and worker behavior</span><a class="self-link" href="#worklets-workers"></a></h3>
   <p>Any <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#worklet-agent" id="ref-for-worklet-agent">worklet agent</a> whose single <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-code-realms" id="ref-for-sec-code-realms">realm</a>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-realm-global" id="ref-for-concept-realm-global">global object</a>'s <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets#workletglobalscope-owner-document" id="ref-for-workletglobalscope-owner-document">owning document</a> is <a data-link-type="dfn" href="#frozen" id="ref-for-frozen③">frozen</a> must become <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-forward-progress" id="ref-for-sec-forward-progress">blocked</a>.
Any <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dedicated-worker-agent" id="ref-for-dedicated-worker-agent">dedicated worker agent</a> whose single <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-code-realms" id="ref-for-sec-code-realms①">realm</a>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-realm-global" id="ref-for-concept-realm-global①">global object</a>'s <a data-link-type="dfn" href="#dedicatedworkerglobalscope-owning-document" id="ref-for-dedicatedworkerglobalscope-owning-document">owning document</a> is non-null and <a data-link-type="dfn" href="#frozen" id="ref-for-frozen④">frozen</a> must become <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-forward-progress" id="ref-for-sec-forward-progress①">blocked</a>.</p>
   <div class="algorithm" data-algorithm="owning document">
     To determine the <dfn class="dfn-paneled" data-dfn-for="DedicatedWorkerGlobalScope" data-dfn-type="dfn" data-export id="dedicatedworkerglobalscope-owning-document">owning document</dfn> for a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope" id="ref-for-dedicatedworkerglobalscope">DedicatedWorkerGlobalScope</a></code> <var>workerGlobalScope</var>: 
    <ol>
     <li data-md>
      <p>If <var>workerGlobalScope</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/workers.html#concept-WorkerGlobalScope-owner-set" id="ref-for-concept-WorkerGlobalScope-owner-set">owner set</a> consists of a single <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code> <var>document</var>, then return <var>document</var>.</p>
     <li data-md>
      <p>If <var>workerGlobalScope</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/workers.html#concept-WorkerGlobalScope-owner-set" id="ref-for-concept-WorkerGlobalScope-owner-set①">owner set</a> consists of a single <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope" id="ref-for-dedicatedworkerglobalscope①">DedicatedWorkerGlobalScope</a></code> <var>parentWorkerGlobalScope</var>, then return <var>parentWorkerGlobalScope</var>’s <a data-link-type="dfn" href="#dedicatedworkerglobalscope-owning-document" id="ref-for-dedicatedworkerglobalscope-owning-document①">owning document</a>.</p>
     <li data-md>
      <p>Return null.</p>
    </ol>
    <p class="note" role="note"><span>NOTE:</span> A <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope" id="ref-for-dedicatedworkerglobalscope②">DedicatedWorkerGlobalScope</a></code>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/workers.html#concept-WorkerGlobalScope-owner-set" id="ref-for-concept-WorkerGlobalScope-owner-set②">owner set</a> will always have exactly one item.</p>
   </div>
   <h3 class="heading settled" data-level="5.2" id="mod"><span class="secno">5.2. </span><span class="content">Modifications to the HTML Standard</span><a class="self-link" href="#mod"></a></h3>
   <h4 class="heading settled" data-level="5.2.1" id="html-bfcache-dfn"><span class="secno">5.2.1. </span><span class="content"><a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#unloading-documents">Unloading documents</a> and <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#history-traversal">history traversal</a></span><a class="self-link" href="#html-bfcache-dfn"></a></h4>
   <p>When documents move into and out of <a href="https://webkit.org/blog/427/webkit-page-cache-i-the-basics/">bfcache (back forward cache)</a> they will transition its <a data-link-type="dfn" href="#document-frozenness" id="ref-for-document-frozenness①">frozenness</a> state to true and false respectively.</p>
   <ul>
    <li data-md>
     <p>In the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#unload-a-document" id="ref-for-unload-a-document">unload a document</a> algorithm, after Step #5, if the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#dom-pagetransitionevent-persisted" id="ref-for-dom-pagetransitionevent-persisted">persisted</a></code> attribute is true (i.e. we are moving to bfcache), <a data-link-type="dfn" href="#change-the-frozenness-of-a-document" id="ref-for-change-the-frozenness-of-a-document①">change the frozenness of a document</a>, given <var>document</var> and true.</p>
    <li data-md>
     <p>In the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#traverse-the-history" id="ref-for-traverse-the-history">traverse the history</a> algorithm, before Step #4.6.4, if the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#dom-pagetransitionevent-persisted" id="ref-for-dom-pagetransitionevent-persisted①">persisted</a></code> attribute is true (i.e. we are moving out of bfcache), <a data-link-type="dfn" href="#change-the-frozenness-of-a-document" id="ref-for-change-the-frozenness-of-a-document②">change the frozenness of a document</a>, given <var>document</var> and false.</p>
   </ul>
   <h4 class="heading settled" data-level="5.2.2" id="html-html-event-loop-definitions"><span class="secno">5.2.2. </span><span class="content"><a href="https://html.spec.whatwg.org/multipage/webappapis.html#definitions-3">Event loop: definitions</a></span><a class="self-link" href="#html-html-event-loop-definitions"></a></h4>
   <p>Replace: A <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task">task</a> is runnable if its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">document</a> if either null or <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active" id="ref-for-fully-active">fully active</a>.</p>
   <p>With: A <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task" id="ref-for-concept-task①">task</a> is runnable if its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document①">document</a> is either null or <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active" id="ref-for-fully-active①">fully active</a>, and is also <a data-link-type="dfn" href="#unfrozen" id="ref-for-unfrozen①">unfrozen</a>.</p>
   <h4 class="heading settled" data-level="5.2.3" id="html-event-loop"><span class="secno">5.2.3. </span><span class="content"><a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model">Event loop: processing model</a></span><a class="self-link" href="#html-event-loop"></a></h4>
   <p>After Step #11 during the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="ref-for-update-the-rendering">Update the rendering</a> add the following step.</p>
   <p>For each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active" id="ref-for-fully-active②">fully active</a> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code> <var>doc</var> in <var>docs</var>, run the <a data-link-type="dfn" href="#update-document-frozenness-steps" id="ref-for-update-document-frozenness-steps">update document frozenness steps</a> given <var>doc</var>.</p>
   <h4 class="heading settled" data-level="5.2.4" id="html-discarding"><span class="secno">5.2.4. </span><span class="content"><a href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded">Discarding browsing contexts</a></span><a class="self-link" href="#html-discarding"></a></h4>
   <p>Rename the "<a href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded">discard</a>" concept, for both browsing contexts and documents, to "destroy". This allows us to use the "discarded" terminology for the user-facing <code class="idl"><a data-link-type="idl" href="#dom-document-wasdiscarded" id="ref-for-dom-document-wasdiscarded①">wasDiscarded</a></code> attribute.</p>
   <h4 class="heading settled" data-level="5.2.5" id="html-initialize-doc"><span class="secno">5.2.5. </span><span class="content"><a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#initialise-the-document-object">Initialize the document</a></span><a class="self-link" href="#html-initialize-doc"></a></h4>
   <p>Before Step #3 add following:</p>
   <p>If the browsing context was previously <a data-link-type="dfn" href="#discarded" id="ref-for-discarded①">discarded</a>, then set the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code>'s <a data-link-type="dfn" href="#document-discarded" id="ref-for-document-discarded①">discarded</a> boolean to true.</p>
   <h4 class="heading settled" data-level="5.2.6" id="html-iframe-load"><span class="secno">5.2.6. </span><span class="content"><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#iframe-load-event-steps" id="ref-for-iframe-load-event-steps①">iframe load event steps</a></span><a class="self-link" href="#html-iframe-load"></a></h4>
   <p>After Step #5 add following:</p>
   <p>Run the <a data-link-type="dfn" href="#update-document-frozenness-steps" id="ref-for-update-document-frozenness-steps①">update document frozenness steps</a> given <var>child document</var>.</p>
   <h4 class="heading settled" data-level="5.2.7" id="html-media-elements"><span class="secno">5.2.7. </span><span class="content"><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlmediaelement" id="ref-for-htmlmediaelement">HTMLMediaElement</a></code></span><a class="self-link" href="#html-media-elements"></a></h4>
   <p>Each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlmediaelement" id="ref-for-htmlmediaelement①">HTMLMediaElement</a></code> has a <dfn class="dfn-paneled" data-dfn-for="HTMLMediaElement" data-dfn-type="dfn" data-noexport id="htmlmediaelement-resume-frozen-flag">resume frozen flag</dfn>, which is initially set to false.</p>
   <h4 class="heading settled" data-level="5.2.8" id="html-post-message"><span class="secno">5.2.8. </span><span class="content"><a href="https://html.spec.whatwg.org/multipage/web-messaging.html#posting-messages">Posting messages</a></span><a class="self-link" href="#html-post-message"></a></h4>
   <p>Add a note:</p>
   <p class="note" role="note"><span>NOTE:</span> When posting a message to a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②">Window</a></code> that is <a data-link-type="dfn" href="#frozen" id="ref-for-frozen⑤">frozen</a>, events that are queued on the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/web-messaging.html#posted-message-task-source" id="ref-for-posted-message-task-source">posted message task source</a> will not run until the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window③">Window</a></code> is <a data-link-type="dfn" href="#unfrozen" id="ref-for-unfrozen②">unfrozen</a>. If too many events are queued, the user agent might <a data-link-type="dfn" href="#discarded" id="ref-for-discarded②">discard</a> the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window④">Window</a></code>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#window-bc" id="ref-for-window-bc">browsing context</a> (as part of the general allowance for discarding under resource pressure).</p>
   <h3 class="heading settled" data-level="5.3" id="serviceworker-mod"><span class="secno">5.3. </span><span class="content">Modifications to the Service Worker Standard</span><a class="self-link" href="#serviceworker-mod"></a></h3>
   <h4 class="heading settled" data-level="5.3.1" id="serviceworker-client-dfn"><span class="secno">5.3.1. </span><span class="content"><a href="https://w3c.github.io/ServiceWorker/#client-interface"><code>Client</code></a></span><a class="self-link" href="#serviceworker-client-dfn"></a></h4>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#client" id="ref-for-client"><c- g>Client</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-clientlifecyclestate" id="ref-for-enumdef-clientlifecyclestate"><c- n>ClientLifecycleState</c-></a> <dfn class="idl-code" data-dfn-for="Client" data-dfn-type="attribute" data-export data-readonly data-type="ClientLifecycleState" id="dom-client-lifecyclestate"><code><c- g>lifecycleState</c-></code><a class="self-link" href="#dom-client-lifecyclestate"></a></dfn>;
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-clientlifecyclestate"><code><c- g>ClientLifecycleState</c-></code></dfn> {
    <dfn class="dfn-paneled idl-code" data-dfn-for="ClientLifecycleState" data-dfn-type="enum-value" data-export id="dom-clientlifecyclestate-active"><code><c- s>"active"</c-></code></dfn>,
    <dfn class="dfn-paneled idl-code" data-dfn-for="ClientLifecycleState" data-dfn-type="enum-value" data-export id="dom-clientlifecyclestate-frozen"><code><c- s>"frozen"</c-></code></dfn>
};
</pre>
   <p>A <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#client" id="ref-for-client①">Client</a></code> object has an associated <dfn class="dfn-paneled" data-dfn-for="Client" data-dfn-type="dfn" data-noexport id="dfn-service-worker-client-lifecycle-state">lifecycle state</dfn>, which is one of the <code class="idl"><a data-link-type="idl" href="#enumdef-clientlifecyclestate" id="ref-for-enumdef-clientlifecyclestate①">ClientLifecycleState</a></code> enumeration values.</p>
   <h5 class="heading settled" data-level="5.3.1.1" id="service-worker-client-lifecycle-state"><span class="secno">5.3.1.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#dom-serviceworkerclient-lifecyclestate" id="ref-for-dom-serviceworkerclient-lifecyclestate">lifecycleState</a></code></span><a class="self-link" href="#service-worker-client-lifecycle-state"></a></h5>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="ServiceWorkerClient" data-dfn-type="attribute" data-export id="dom-serviceworkerclient-lifecyclestate"><code>lifecycleState</code></dfn> attribute <em>must</em> return the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object">context object</a>'s <a data-link-type="dfn" href="#dfn-service-worker-client-lifecycle-state" id="ref-for-dfn-service-worker-client-lifecycle-state">lifecycle state</a>.</p>
   <h5 class="heading settled" data-level="5.3.1.2" id="serviceworker-matchall-dfn"><span class="secno">5.3.1.2. </span><span class="content"><a href="https://w3c.github.io/ServiceWorker/#clients-matchall"><code>matchAll(options)</code></a></span><a class="self-link" href="#serviceworker-matchall-dfn"></a></h5>
   <p>Rename variable in Step #4.</p>
   <ol>
    <li data-md>
     <p>Let <var>matchedClientData</var> be a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a>.</p>
   </ol>
   <p>Before Step #2.5.1 insert</p>
   <ol>
    <li data-md>
     <p>Let <var>lifecycleState</var> be the result of running <a data-link-type="dfn" href="#get-client-lifecycle-state" id="ref-for-get-client-lifecycle-state">Get Client Lifecycle State</a> with <var>client</var>.</p>
   </ol>
   <p>Append lifecycleState to list in Step #5.3.1</p>
   <ol>
    <li data-md>
     <p>Let <var>windowData</var> be «[ "client" → <var>client</var>, "ancestorOriginsList" → a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list①">list</a>, "lifecycleState" → <var>lifecycleState</var> ]».</p>
   </ol>
   <p>Append lifecycleState to matchedClientData in Step #5.4</p>
   <ol>
    <li data-md>
     <p>Add «[ "client" → <var>client</var>, "lifecycleState" → <var>lifecycleState</var> ]» to <var>matchedClientData</var>.</p>
   </ol>
   <p>Pass windowData lifecycleState into Create Window Client algorithm in Step #6.2</p>
   <ol>
    <li data-md>
     <p>Let <var>windowClient</var> be the result of running <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#create-windowclient-algorithm" id="ref-for-create-windowclient-algorithm">Create Window Client</a> algorithm with <var>windowData</var>["<code>client</code>"], <var>windowData</var>["<code>frameType</code>"], <var>windowData</var>["<code>visibilityState</code>"], <var>windowData</var>["<code>focusState</code>"], <var>windowData</var>["<code>ancestorOriginsList</code>"], and <var>windowData</var>["<code>lifecycleState</code>"] as the arguments.</p>
   </ol>
   <p>Adjust Step #6.3</p>
   <ol>
    <li data-md>
     <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <var>clientData</var> in <var>matchedClientData</var>:</p>
     <ol>
      <li data-md>
       <p>Let <var>clientObject</var> be the result of running <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#create-client-algorithm" id="ref-for-create-client-algorithm">Create Client</a> algorithm with <var>clientData</var>["<code>client</code>"], and <var>clientData</var>["<code>lifecycleState</code>"] as the arguments.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append">Append</a> <var>clientObject</var> to <var>clientObjects</var>.</p>
     </ol>
   </ol>
   <h5 class="heading settled" data-level="5.3.1.3" id="serviceworker-openwindow-dfn"><span class="secno">5.3.1.3. </span><span class="content"><a href="https://w3c.github.io/ServiceWorker/#dom-clients-openwindow"><code>openWindow(url)</code></a></span><a class="self-link" href="#serviceworker-openwindow-dfn"></a></h5>
   <p>Before Step #7.5 insert</p>
   <ol>
    <li data-md>
     <p>Let <var>lifecycleState</var> be the result of running <a data-link-type="dfn" href="#get-client-lifecycle-state" id="ref-for-get-client-lifecycle-state①">Get Client Lifecycle State</a> with <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object①">context object</a>'s associated <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client" id="ref-for-dfn-service-worker-client">service worker client</a>.</p>
   </ol>
   <p>Adjust Step #7.8.2 to provide lifecycleState</p>
   <ol>
    <li data-md>
     <p>Let <var>client</var> be the result of running <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#create-windowclient-algorithm" id="ref-for-create-windowclient-algorithm①">Create Window Client</a> with <var>newContext</var>’s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window⑤">Window</a></code> object’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object" id="ref-for-environment-settings-object">environment settings object</a>, <var>frameType</var>, <var>visibilityState</var>, <var>focusState</var>, <var>ancestorOriginsList</var>, and <var>lifecycleState</var> as the arguments.</p>
   </ol>
   <h4 class="heading settled" data-level="5.3.2" id="serviceworker-algorithms-dfn"><span class="secno">5.3.2. </span><span class="content"><a href="https://w3c.github.io/ServiceWorker/#algorithms">Algorithms</a></span><a class="self-link" href="#serviceworker-algorithms-dfn"></a></h4>
   <section class="algorithm" data-algorithm="Get Client Lifecycle State">
    <h5 class="heading settled" data-level="5.3.2.1" id="get-client-lifecycle-state-algorithm"><span class="secno">5.3.2.1. </span><span class="content"><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="get-client-lifecycle-state">Get Client Lifecycle State</dfn></span><a class="self-link" href="#get-client-lifecycle-state-algorithm"></a></h5>
    <p>Append the following algorithm:</p>
    <dl>
     <dt data-md>Input
     <dd data-md>
      <p><var>client</var>, a <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client" id="ref-for-dfn-service-worker-client①">service worker client</a></p>
     <dt data-md>Output
     <dd data-md>
      <p><var>state</var>, a string</p>
    </dl>
    <ol>
     <li data-md>
      <p>Let <var>state</var> be <code class="idl"><a data-link-type="idl" href="#dom-clientlifecyclestate-active" id="ref-for-dom-clientlifecyclestate-active">"active"</a></code>.</p>
     <li data-md>
      <p>If <var>client</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-global" id="ref-for-concept-settings-object-global">global object</a>'s <a data-link-type="dfn" href="#dedicatedworkerglobalscope-owning-document" id="ref-for-dedicatedworkerglobalscope-owning-document②">owning document</a> is <a data-link-type="dfn" href="#frozen" id="ref-for-frozen⑥">frozen</a>, set <var>state</var> to be <code class="idl"><a data-link-type="idl" href="#dom-clientlifecyclestate-frozen" id="ref-for-dom-clientlifecyclestate-frozen">"frozen"</a></code></p>
     <li data-md>
      <p>Return <var>state</var>.</p>
    </ol>
   </section>
   <section class="algorithm" data-algorithm="create-client-monkeypatch">
    <h5 class="heading settled" data-level="5.3.2.2" id="serviceworker-createclient-dfn"><span class="secno">5.3.2.2. </span><span class="content"><a href="https://w3c.github.io/ServiceWorker/#create-client-algorithm" id="termref-for-">Create Client</a></span><a class="self-link" href="#serviceworker-createclient-dfn"></a></h5>
    <p>To Input append <var>lifecycleState</var>, a string</p>
    <p>After Step #2 in Output append</p>
    <ol>
     <li data-md>
      <p>Set <var>clientObject</var>’s <a data-link-type="dfn" href="#dfn-service-worker-client-lifecycle-state" id="ref-for-dfn-service-worker-client-lifecycle-state①">lifecycle state</a> to <var>lifecycleState</var>.</p>
    </ol>
   </section>
   <section class="algorithm" data-algorithm="create-window-client-monkeypatch">
    <h5 class="heading settled" data-level="5.3.2.3" id="serviceworker-createwindowclient-dfn"><span class="secno">5.3.2.3. </span><span class="content"><a href="https://w3c.github.io/ServiceWorker/#create-windowclient-algorithm" id="termref-for-①">Create Window Client</a></span><a class="self-link" href="#serviceworker-createwindowclient-dfn"></a></h5>
    <p>To Input append <var>lifecycleState</var>, a string</p>
    <p>After Step #5 in Output append</p>
    <ol>
     <li data-md>
      <p>Set <var>windowClient</var>’s <a data-link-type="dfn" href="#dfn-service-worker-client-lifecycle-state" id="ref-for-dfn-service-worker-client-lifecycle-state②">lifecycle state</a> to <var>lifecycleState</var>.</p>
    </ol>
   </section>
   <h3 class="heading settled" data-level="5.4" id="page-lifecycle"><span class="secno">5.4. </span><span class="content">Page lifecycle processing model</span><a class="self-link" href="#page-lifecycle"></a></h3>
   <h4 class="heading settled" data-level="5.4.1" id="frozenness-state"><span class="secno">5.4.1. </span><span class="content">FROZENNESS state</span><a class="self-link" href="#frozenness-state"></a></h4>
    A document can be in one of the following <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-noexport id="document-frozenness">FROZENNESS</dfn> states: 
   <ul>
    <li data-md>
     <p>true: the document is <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="frozen">frozen</dfn>, any tasks associated with the document will not run</p>
    <li data-md>
     <p>false: the document is <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="unfrozen">unfrozen</dfn>, tasks associated with the document will run as usual</p>
     <p class="note" role="note"><span>NOTE:</span> Per the <a data-link-type="dfn" href="#change-the-frozenness-of-a-top-level-document" id="ref-for-change-the-frozenness-of-a-top-level-document">change the frozenness of a top-level document</a> algorithm, when the Document of the top level browsing context changes its <a data-link-type="dfn" href="#document-frozenness" id="ref-for-document-frozenness②">frozenness</a> state then all documents of descendant browsing contexts will also change <a data-link-type="dfn" href="#document-frozenness" id="ref-for-document-frozenness③">frozenness</a> to the same value (and be consistent with the Document of the top level browsing context).</p>
   </ul>
   <p>The UA may choose to execute <a data-link-type="dfn" href="#change-the-frozenness-of-a-top-level-document" id="ref-for-change-the-frozenness-of-a-top-level-document①">change the frozenness of a top-level document</a> algorithm with true in certain situations.
For instance, if a top level browsing context is in the background or hidden, and a grace period has elapsed the UA could execute <a data-link-type="dfn" href="#change-the-frozenness-of-a-top-level-document" id="ref-for-change-the-frozenness-of-a-top-level-document②">change the frozenness of a top-level document</a> with true to conserve resources and maintain the quality of the (foreground) user experience.
Specific examples:</p>
   <ul>
    <li data-md>
     <p>In mobile Chrome, tabs that have been in background for (at least) 5 minutes, may be <a data-link-type="dfn" href="#frozen" id="ref-for-frozen⑦">frozen</a>, to conserve battery and data.</p>
    <li data-md>
     <p>In desktop Chrome, background tabs that are not important to the user (not used in some time) may be <a data-link-type="dfn" href="#discarded" id="ref-for-discarded③">discarded</a>, to conserve memory</p>
     <p class="note" role="note"><span>NOTE:</span> background tabs that are actively doing work on behalf of the user (eg. playing audio) are generally not <a data-link-type="dfn" href="#frozen" id="ref-for-frozen⑧">frozen</a> or <a data-link-type="dfn" href="#discarded" id="ref-for-discarded④">discarded</a>.</p>
     <p class="note" role="note"><span>NOTE:</span> For a detailed list of heuristics &amp; exclusions used by Chrome, see <a href="https://docs.google.com/document/d/1QJpuBTdllLVflMJSov0tlFX3e3yfSfd_-al2IBavbQM/edit">this doc</a>.</p>
   </ul>
   <p>The UA will typically execute <a data-link-type="dfn" href="#change-the-frozenness-of-a-top-level-document" id="ref-for-change-the-frozenness-of-a-top-level-document③">change the frozenness of a top-level document</a> with false when the user revisits that browsing context. In addition, the UA may choose to periodically execute <a data-link-type="dfn" href="#change-the-frozenness-of-a-top-level-document" id="ref-for-change-the-frozenness-of-a-top-level-document④">change the frozenness of a top-level document</a> with false in the background, if plentiful resources are available.</p>
   <h4 class="heading settled" data-level="5.4.2" id="changing-frozenness"><span class="secno">5.4.2. </span><span class="content">Changing the frozenness of documents</span><a class="self-link" href="#changing-frozenness"></a></h4>
   <div class="algorithm" data-algorithm="change the frozenness of a top-level document">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="change-the-frozenness-of-a-top-level-document">change the frozenness of a top-level document</dfn>, given a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑨">Document</a></code> <var>topLevelDoc</var> and boolean <a data-link-type="dfn" href="#document-frozenness" id="ref-for-document-frozenness④">frozenness</a> state <var>frozenness</var>: 
    <ol>
     <li data-md>
      <p class="assertion">Assert: <var>doc</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc" id="ref-for-concept-document-bc⑤">browsing context</a> is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context">top-level browsing context</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="#change-the-frozenness-of-a-document" id="ref-for-change-the-frozenness-of-a-document③">Change the frozenness of a document</a> given <var>topLevelDoc</var>, <var>frozenness</var>, and false.</p>
     <li data-md>
      <p>Let <var>descendants</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#list-of-the-descendant-browsing-contexts" id="ref-for-list-of-the-descendant-browsing-contexts">list of the descendant browsing contexts</a> of <var>doc</var>.</p>
     <li data-md>
      <p>For each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context">browsing context</a> <var>b</var> in <var>descendants</var>:</p>
      <ol>
       <li data-md>
        <p>Let <var>descendantDocument</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#active-document" id="ref-for-active-document">active document</a> of <var>b</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#change-the-frozenness-of-a-document" id="ref-for-change-the-frozenness-of-a-document④">Change the frozenness of a document</a> given <var>descendantDocument</var>, <var>frozenness</var>, and false.</p>
      </ol>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="change the frozenness of a document">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="change-the-frozenness-of-a-document">change the frozenness of a document</dfn>, given a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①⓪">Document</a></code> <var>doc</var>, a boolean <a data-link-type="dfn" href="#document-frozenness" id="ref-for-document-frozenness⑤">frozenness</a> state <var>frozenness</var>, and a boolean <var>auto resume frozen media</var>: 
    <ol>
     <li data-md>
      <p>If <var>frozenness</var> is true, run the <a data-link-type="dfn" href="#freeze-steps" id="ref-for-freeze-steps①">freeze steps</a> for <var>doc</var> given <var>auto resume frozen media</var>.</p>
     <li data-md>
      <p>Otherwise, run the <a data-link-type="dfn" href="#resume-steps" id="ref-for-resume-steps">resume steps</a> given <var>doc</var>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="freeze steps">
     To run the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="freeze-steps">freeze steps</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①①">Document</a></code> <var>doc</var>, given a boolean <var>auto resume frozen media</var>: 
    <ol>
     <li data-md>
      <p>Set <var>doc</var>’s <a data-link-type="dfn" href="#document-frozenness" id="ref-for-document-frozenness⑥">frozenness</a> state to true.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire">Fire an event</a> named <code>freeze</code> at <var>doc</var>.</p>
     <li data-md>
      <p>Let <var>elements</var> be all <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/media.html#media-element" id="ref-for-media-element">media elements</a> that are <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant" id="ref-for-concept-shadow-including-descendant">shadow-including descendants</a> of <var>doc</var>, in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order" id="ref-for-concept-shadow-including-tree-order">shadow-including tree order</a>.</p>
     <li data-md>
      <p>For each <var>element</var> in <var>elements</var>:</p>
      <ol>
       <li data-md>
        <p>If <var>element</var>’s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#dom-media-paused" id="ref-for-dom-media-paused">paused</a></code> is false, then:</p>
        <ol>
         <li data-md>
          <p>Set <var>element</var>’s <a data-link-type="dfn" href="#htmlmediaelement-resume-frozen-flag" id="ref-for-htmlmediaelement-resume-frozen-flag">resume frozen flag</a> to <var>auto resume frozen media</var>.</p>
         <li data-md>
          <p>Execute <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/media.html#internal-pause-steps" id="ref-for-internal-pause-steps">media pause</a> on <var>element</var>.</p>
        </ol>
      </ol>
      <p class="note" role="note"><span>NOTE:</span> it is intentional that the ordering between the assignment of the of frozneness state
occurs first before event firing.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="resume steps">
     To run the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="resume-steps">resume steps</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①②">Document</a></code> <var>doc</var>: 
    <ol>
     <li data-md>
      <p>Let <var>elements</var> be all <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/media.html#media-element" id="ref-for-media-element①">media elements</a> that are <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant" id="ref-for-concept-shadow-including-descendant①">shadow-including descendants</a> of <var>doc</var>, in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order" id="ref-for-concept-shadow-including-tree-order①">shadow-including tree order</a>.</p>
      <ol>
       <li data-md>
        <p>For each <var>element</var> in <var>elements</var>:</p>
        <ol>
         <li data-md>
          <p>If <var>elements</var>’s <a data-link-type="dfn" href="#htmlmediaelement-resume-frozen-flag" id="ref-for-htmlmediaelement-resume-frozen-flag①">resume frozen flag</a> is true.</p>
          <ol>
           <li data-md>
            <p>Set <var>elements</var>’s <a data-link-type="dfn" href="#htmlmediaelement-resume-frozen-flag" id="ref-for-htmlmediaelement-resume-frozen-flag②">resume frozen flag</a> to false.</p>
           <li data-md>
            <p>Execute <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/media.html#internal-play-steps" id="ref-for-internal-play-steps">media play</a> on <var>element</var>.</p>
          </ol>
        </ol>
      </ol>
     <li data-md>
      <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire①">Fire an event</a> named <code>resume</code> at <var>doc</var>.</p>
     <li data-md>
      <p>Set <var>doc</var>’s <a data-link-type="dfn" href="#document-frozenness" id="ref-for-document-frozenness⑦">frozenness</a> state to false.</p>
      <p class="note" role="note"><span>NOTE:</span> it is intentional that the ordering between the assignment of the of frozneness state
comes last after event firing.</p>
    </ol>
   </div>
   <h4 class="heading settled" data-level="5.4.3" id="discarding"><span class="secno">5.4.3. </span><span class="content">Discarding</span><a class="self-link" href="#discarding"></a></h4>
    Each Document has a <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-noexport id="document-discarded">discarded</dfn> boolean, which is initially false. 
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="discarded|discard" id="discarded">discard</dfn> a browsing context, <a href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded">destroy the browsing context</a>, and make note of the fact that the reason it and any descendant browsing contents were destroyed was because of discarding.</p>
   <p class="note" role="note"><span>NOTE:</span> <a data-link-type="dfn" href="#discarded" id="ref-for-discarded⑤">Discard</a> is typically done to reclaim system memory, when memory and other resources are running low. On the other hand destroying a browser context is the normal teardown due to user leaving the page etc.</p>
   <p>Browsing contexts -- that are in the background and have their documents in <a href="https://www.w3.org/TR/page-visibility-2/#visibility-states-and-the-visibilitystate-enum">VisibilityState hidden</a> -- can be <a data-link-type="dfn" href="#discarded" id="ref-for-discarded⑥">discarded</a>, under resource pressure (eg. low memory). Specific example:</p>
   <ul>
    <li data-md>
     <p>In desktop Chrome, background tabs that are not important to the user (not used in some time) may be <a data-link-type="dfn" href="#discarded" id="ref-for-discarded⑦">discarded</a>, to conserve memory</p>
     <p class="note" role="note"><span>NOTE:</span> background tabs that are actively doing work on behalf of the user (eg. playing audio) are generally not <a data-link-type="dfn" href="#discarded" id="ref-for-discarded⑧">discarded</a>.</p>
     <p class="note" role="note"><span>NOTE:</span> For a detailed list of heuristics &amp; exclusions used by Chrome, see <a href="https://docs.google.com/document/d/1QJpuBTdllLVflMJSov0tlFX3e3yfSfd_-al2IBavbQM/edit">this doc</a>.</p>
   </ul>
   <p>When a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context①">top-level browsing context</a> (tab in the browser) is <a data-link-type="dfn" href="#discarded" id="ref-for-discarded⑨">discarded</a> due to resource pressure (or unexpected events eg. process crash), and later the user revisits the tab in the browser, then the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①③">Document</a></code>'s <a data-link-type="dfn" href="#document-discarded" id="ref-for-document-discarded②">discarded</a> boolean will be true due to <a href="#html-initialize-doc">§ 5.2.5 Initialize the document</a>.</p>
   <h2 class="heading settled" data-level="6" id="acknowledgements"><span class="secno">6. </span><span class="content">Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>Special thanks to
Dave Tapuska,
Fadi Meawad,
Ojan Vafai,
Olli Pettay,
Philip Walton, and
Todd Reifsteck
for their technical input and suggestions that led to improvements to this specification.</p>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-clientlifecyclestate-active">"active"</a><span>, in §5.3.1</span>
   <li><a href="#change-the-frozenness-of-a-document">change the frozenness of a document</a><span>, in §5.4.2</span>
   <li><a href="#change-the-frozenness-of-a-top-level-document">change the frozenness of a top-level document</a><span>, in §5.4.2</span>
   <li><a href="#enumdef-clientlifecyclestate">ClientLifecycleState</a><span>, in §5.3.1</span>
   <li><a href="#discarded">discard</a><span>, in §5.4.3</span>
   <li>
    discarded
    <ul>
     <li><a href="#discarded">definition of</a><span>, in §5.4.3</span>
     <li><a href="#document-discarded">dfn for Document</a><span>, in §5.4.3</span>
    </ul>
   <li><a href="#execution-while-not-rendered">execution-while-not-rendered</a><span>, in §4</span>
   <li><a href="#execution-while-out-of-viewport">execution-while-out-of-viewport</a><span>, in §4</span>
   <li><a href="#freeze-steps">freeze steps</a><span>, in §5.4.2</span>
   <li><a href="#dom-clientlifecyclestate-frozen">"frozen"</a><span>, in §5.3.1</span>
   <li><a href="#frozen">frozen</a><span>, in §5.4.1</span>
   <li><a href="#document-frozenness">FROZENNESS</a><span>, in §5.4.1</span>
   <li><a href="#get-client-lifecycle-state">Get Client Lifecycle State</a><span>, in §5.3.2.1</span>
   <li>
    lifecycleState
    <ul>
     <li><a href="#dom-client-lifecyclestate">attribute for Client</a><span>, in §5.3.1</span>
     <li><a href="#dom-serviceworkerclient-lifecyclestate">attribute for ServiceWorkerClient</a><span>, in §5.3.1.1</span>
    </ul>
   <li><a href="#dfn-service-worker-client-lifecycle-state">lifecycle state</a><span>, in §5.3.1</span>
   <li><a href="#dom-document-onfreeze">onfreeze</a><span>, in §3</span>
   <li><a href="#dom-document-onresume">onresume</a><span>, in §3</span>
   <li><a href="#dedicatedworkerglobalscope-owning-document">owning document</a><span>, in §5.1</span>
   <li><a href="#htmlmediaelement-resume-frozen-flag">resume frozen flag</a><span>, in §5.2.7</span>
   <li><a href="#resume-steps">resume steps</a><span>, in §5.4.2</span>
   <li><a href="#unfrozen">unfrozen</a><span>, in §5.4.1</span>
   <li><a href="#update-document-frozenness-steps">update document frozenness steps</a><span>, in §4</span>
   <li><a href="#dom-document-wasdiscarded">wasDiscarded</a><span>, in §3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-workletglobalscope-owner-document">
   <a href="https://drafts.css-houdini.org/worklets#workletglobalscope-owner-document">https://drafts.css-houdini.org/worklets#workletglobalscope-owner-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletglobalscope-owner-document">5.1. Modifications to worklet and worker behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-viewport">
   <a href="https://www.w3.org/TR/CSS2/visuren.html#viewport">https://www.w3.org/TR/CSS2/visuren.html#viewport</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-viewport">4. Feature Policies</a> <a href="#ref-for-viewport①">(2)</a> <a href="#ref-for-viewport②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">2. Page Lifecycle States</a> <a href="#ref-for-document①">(2)</a>
    <li><a href="#ref-for-document②">3. API</a> <a href="#ref-for-document③">(2)</a> <a href="#ref-for-document④">(3)</a>
    <li><a href="#ref-for-document⑤">4. Feature Policies</a>
    <li><a href="#ref-for-document⑥">5.1. Modifications to worklet and worker behavior</a>
    <li><a href="#ref-for-document⑦">5.2.3. Event loop: processing model</a>
    <li><a href="#ref-for-document⑧">5.2.5. Initialize the document</a>
    <li><a href="#ref-for-document⑨">5.4.2. Changing the frozenness of documents</a> <a href="#ref-for-document①⓪">(2)</a> <a href="#ref-for-document①①">(3)</a> <a href="#ref-for-document①②">(4)</a>
    <li><a href="#ref-for-document①③">5.4.3. Discarding</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-context-object">
   <a href="https://dom.spec.whatwg.org/#context-object">https://dom.spec.whatwg.org/#context-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-context-object">5.3.1.1. lifecycleState</a>
    <li><a href="#ref-for-context-object①">5.3.1.3. openWindow(url)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document">
   <a href="https://dom.spec.whatwg.org/#concept-document">https://dom.spec.whatwg.org/#concept-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document">5.2.2. Event loop: definitions</a> <a href="#ref-for-concept-document①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-fire">
   <a href="https://dom.spec.whatwg.org/#concept-event-fire">https://dom.spec.whatwg.org/#concept-event-fire</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-fire">5.4.2. Changing the frozenness of documents</a> <a href="#ref-for-concept-event-fire①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-including-descendant">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">https://dom.spec.whatwg.org/#concept-shadow-including-descendant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-including-descendant">5.4.2. Changing the frozenness of documents</a> <a href="#ref-for-concept-shadow-including-descendant①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-including-tree-order">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order">https://dom.spec.whatwg.org/#concept-shadow-including-tree-order</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-including-tree-order">5.4.2. Changing the frozenness of documents</a> <a href="#ref-for-concept-shadow-including-tree-order①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-forward-progress">
   <a href="https://tc39.github.io/ecma262/#sec-forward-progress">https://tc39.github.io/ecma262/#sec-forward-progress</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-forward-progress">5.1. Modifications to worklet and worker behavior</a> <a href="#ref-for-sec-forward-progress①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-code-realms">
   <a href="https://tc39.github.io/ecma262/#sec-code-realms">https://tc39.github.io/ecma262/#sec-code-realms</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-code-realms">5.1. Modifications to worklet and worker behavior</a> <a href="#ref-for-sec-code-realms①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-default-allowlist">
   <a href="https://wicg.github.io/feature-policy/#default-allowlist">https://wicg.github.io/feature-policy/#default-allowlist</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-default-allowlist">4. Feature Policies</a> <a href="#ref-for-default-allowlist①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dedicatedworkerglobalscope">
   <a href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope">https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dedicatedworkerglobalscope">5.1. Modifications to worklet and worker behavior</a> <a href="#ref-for-dedicatedworkerglobalscope①">(2)</a> <a href="#ref-for-dedicatedworkerglobalscope②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">3. API</a> <a href="#ref-for-eventhandler①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlmediaelement">
   <a href="https://html.spec.whatwg.org/multipage/media.html#htmlmediaelement">https://html.spec.whatwg.org/multipage/media.html#htmlmediaelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlmediaelement">5.2.7. HTMLMediaElement</a> <a href="#ref-for-htmlmediaelement①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">3. API</a> <a href="#ref-for-window①">(2)</a>
    <li><a href="#ref-for-window②">5.2.8. Posting messages</a> <a href="#ref-for-window③">(2)</a> <a href="#ref-for-window④">(3)</a>
    <li><a href="#ref-for-window⑤">5.3.1.3. openWindow(url)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-document">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#active-document">https://html.spec.whatwg.org/multipage/browsers.html#active-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-document">5.4.2. Changing the frozenness of documents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-allowed-to-use">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-allowed-to-use">4. Feature Policies</a> <a href="#ref-for-allowed-to-use①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-being-rendered">
   <a href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered">https://html.spec.whatwg.org/multipage/rendering.html#being-rendered</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-being-rendered">4. Feature Policies</a> <a href="#ref-for-being-rendered①">(2)</a> <a href="#ref-for-being-rendered②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-bc">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc">https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-bc">2. Page Lifecycle States</a> <a href="#ref-for-concept-document-bc①">(2)</a>
    <li><a href="#ref-for-concept-document-bc②">4. Feature Policies</a> <a href="#ref-for-concept-document-bc③">(2)</a> <a href="#ref-for-concept-document-bc④">(3)</a>
    <li><a href="#ref-for-concept-document-bc⑤">5.4.2. Changing the frozenness of documents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context-container">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container">https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context-container">4. Feature Policies</a> <a href="#ref-for-browsing-context-container①">(2)</a> <a href="#ref-for-browsing-context-container②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dedicated-worker-agent">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#dedicated-worker-agent">https://html.spec.whatwg.org/multipage/webappapis.html#dedicated-worker-agent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dedicated-worker-agent">5.1. Modifications to worklet and worker behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-environment-settings-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object">https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-environment-settings-object">5.3.1.3. openWindow(url)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-handler-idl-attributes">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes">https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-handler-idl-attributes">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fully-active">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active">https://html.spec.whatwg.org/multipage/browsers.html#fully-active</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fully-active">5.2.2. Event loop: definitions</a> <a href="#ref-for-fully-active①">(2)</a>
    <li><a href="#ref-for-fully-active②">5.2.3. Event loop: processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-settings-object-global">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-global">https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-global</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-settings-object-global">5.3.2.1. Get Client Lifecycle State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-iframe-load-event-steps">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#iframe-load-event-steps">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#iframe-load-event-steps</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-iframe-load-event-steps">4. Feature Policies</a>
    <li><a href="#ref-for-iframe-load-event-steps①">5.2.6. iframe load event steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-of-the-descendant-browsing-contexts">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#list-of-the-descendant-browsing-contexts">https://html.spec.whatwg.org/multipage/browsers.html#list-of-the-descendant-browsing-contexts</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-of-the-descendant-browsing-contexts">5.4.2. Changing the frozenness of documents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-media-element">
   <a href="https://html.spec.whatwg.org/multipage/media.html#media-element">https://html.spec.whatwg.org/multipage/media.html#media-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-element">5.4.2. Changing the frozenness of documents</a> <a href="#ref-for-media-element①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-internal-pause-steps">
   <a href="https://html.spec.whatwg.org/multipage/media.html#internal-pause-steps">https://html.spec.whatwg.org/multipage/media.html#internal-pause-steps</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-internal-pause-steps">5.4.2. Changing the frozenness of documents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-internal-play-steps">
   <a href="https://html.spec.whatwg.org/multipage/media.html#internal-play-steps">https://html.spec.whatwg.org/multipage/media.html#internal-play-steps</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-internal-play-steps">5.4.2. Changing the frozenness of documents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-nested-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-nested-browsing-context">4. Feature Policies</a> <a href="#ref-for-nested-browsing-context①">(2)</a> <a href="#ref-for-nested-browsing-context②">(3)</a> <a href="#ref-for-nested-browsing-context③">(4)</a> <a href="#ref-for-nested-browsing-context④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-WorkerGlobalScope-owner-set">
   <a href="https://html.spec.whatwg.org/multipage/workers.html#concept-WorkerGlobalScope-owner-set">https://html.spec.whatwg.org/multipage/workers.html#concept-WorkerGlobalScope-owner-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-WorkerGlobalScope-owner-set">5.1. Modifications to worklet and worker behavior</a> <a href="#ref-for-concept-WorkerGlobalScope-owner-set①">(2)</a> <a href="#ref-for-concept-WorkerGlobalScope-owner-set②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-media-paused">
   <a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-paused">https://html.spec.whatwg.org/multipage/media.html#dom-media-paused</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-media-paused">5.4.2. Changing the frozenness of documents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-pagetransitionevent-persisted">
   <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#dom-pagetransitionevent-persisted">https://html.spec.whatwg.org/multipage/browsing-the-web.html#dom-pagetransitionevent-persisted</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-pagetransitionevent-persisted">5.2.1. Unloading documents and history traversal</a> <a href="#ref-for-dom-pagetransitionevent-persisted①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-posted-message-task-source">
   <a href="https://html.spec.whatwg.org/multipage/web-messaging.html#posted-message-task-source">https://html.spec.whatwg.org/multipage/web-messaging.html#posted-message-task-source</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-posted-message-task-source">5.2.8. Posting messages</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-document-readiness">
   <a href="https://html.spec.whatwg.org/multipage/dom.html#current-document-readiness">https://html.spec.whatwg.org/multipage/dom.html#current-document-readiness</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-document-readiness">4. Feature Policies</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-task">https://html.spec.whatwg.org/multipage/webappapis.html#concept-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-task">5.2.2. Event loop: definitions</a> <a href="#ref-for-concept-task①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-top-level-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-top-level-browsing-context">5.4.2. Changing the frozenness of documents</a>
    <li><a href="#ref-for-top-level-browsing-context①">5.4.3. Discarding</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-traverse-the-history">
   <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#traverse-the-history">https://html.spec.whatwg.org/multipage/browsing-the-web.html#traverse-the-history</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-traverse-the-history">5.2.1. Unloading documents and history traversal</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-unload-a-document">
   <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#unload-a-document">https://html.spec.whatwg.org/multipage/browsing-the-web.html#unload-a-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unload-a-document">5.2.1. Unloading documents and history traversal</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-update-the-rendering">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-the-rendering">5.2.3. Event loop: processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklet-agent">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#worklet-agent">https://html.spec.whatwg.org/multipage/webappapis.html#worklet-agent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet-agent">5.1. Modifications to worklet and worker behavior</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-append">
   <a href="https://infra.spec.whatwg.org/#list-append">https://infra.spec.whatwg.org/#list-append</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-append">5.3.1.2. matchAll(options)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-iterate">
   <a href="https://infra.spec.whatwg.org/#list-iterate">https://infra.spec.whatwg.org/#list-iterate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-iterate">5.3.1.2. matchAll(options)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">5.3.1.2. matchAll(options)</a> <a href="#ref-for-list①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-calculate-intersection-rect-algo">
   <a href="https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo">https://w3c.github.io/IntersectionObserver/#calculate-intersection-rect-algo</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-calculate-intersection-rect-algo">4. Feature Policies</a> <a href="#ref-for-calculate-intersection-rect-algo①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-client">
   <a href="https://w3c.github.io/ServiceWorker/#client">https://w3c.github.io/ServiceWorker/#client</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-client">5.3.1. Client</a> <a href="#ref-for-client①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-service-worker-client">
   <a href="https://w3c.github.io/ServiceWorker/#dfn-service-worker-client">https://w3c.github.io/ServiceWorker/#dfn-service-worker-client</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-service-worker-client">5.3.1.3. openWindow(url)</a>
    <li><a href="#ref-for-dfn-service-worker-client①">5.3.2.1. Get Client Lifecycle State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-create-client-algorithm">
   <a href="https://w3c.github.io/ServiceWorker/#create-client-algorithm">https://w3c.github.io/ServiceWorker/#create-client-algorithm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-client-algorithm">5.3.1.2. matchAll(options)</a>
    <li><a href="#termref-for-">5.3.2.2. Create Client</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-create-windowclient-algorithm">
   <a href="https://w3c.github.io/ServiceWorker/#create-windowclient-algorithm">https://w3c.github.io/ServiceWorker/#create-windowclient-algorithm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-windowclient-algorithm">5.3.1.2. matchAll(options)</a>
    <li><a href="#ref-for-create-windowclient-algorithm①">5.3.1.3. openWindow(url)</a>
    <li><a href="#termref-for-">5.3.2.3. Create Window Client</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">3. API</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-houdini]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-workletglobalscope-owner-document" style="color:initial">owning document</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-viewport" style="color:initial">viewport</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-context-object" style="color:initial">context object</span>
     <li><span class="dfn-paneled" id="term-for-concept-document" style="color:initial">document</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-fire" style="color:initial">fire an event</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-including-descendant" style="color:initial">shadow-including descendant</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-including-tree-order" style="color:initial">shadow-including tree order</span>
    </ul>
   <li>
    <a data-link-type="biblio">[ecma262]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-forward-progress" style="color:initial">blocked</span>
     <li><span class="dfn-paneled" id="term-for-sec-code-realms" style="color:initial">realm</span>
    </ul>
   <li>
    <a data-link-type="biblio">[feature-policy-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-default-allowlist" style="color:initial">default allowlist</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dedicatedworkerglobalscope" style="color:initial">DedicatedWorkerGlobalScope</span>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-htmlmediaelement" style="color:initial">HTMLMediaElement</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-active-document" style="color:initial">active document</span>
     <li><span class="dfn-paneled" id="term-for-allowed-to-use" style="color:initial">allowed to use</span>
     <li><span class="dfn-paneled" id="term-for-being-rendered" style="color:initial">being rendered</span>
     <li><span class="dfn-paneled" id="term-for-concept-document-bc" style="color:initial">browsing context <small>(for document)</small></span>
     <li><span class="dfn-paneled" id="term-for-browsing-context-container" style="color:initial">browsing context container</span>
     <li><span class="dfn-paneled" id="term-for-dedicated-worker-agent" style="color:initial">dedicated worker agent</span>
     <li><span class="dfn-paneled" id="term-for-environment-settings-object" style="color:initial">environment settings object</span>
     <li><span class="dfn-paneled" id="term-for-event-handler-idl-attributes" style="color:initial">event handler idl attribute</span>
     <li><span class="dfn-paneled" id="term-for-fully-active" style="color:initial">fully active</span>
     <li><span class="dfn-paneled" id="term-for-concept-settings-object-global" style="color:initial">global object <small>(for environment settings object)</small></span>
     <li><span class="dfn-paneled" id="term-for-iframe-load-event-steps" style="color:initial">iframe load event steps</span>
     <li><span class="dfn-paneled" id="term-for-list-of-the-descendant-browsing-contexts" style="color:initial">list of the descendant browsing contexts</span>
     <li><span class="dfn-paneled" id="term-for-media-element" style="color:initial">media elements</span>
     <li><span class="dfn-paneled" id="term-for-internal-pause-steps" style="color:initial">media pause</span>
     <li><span class="dfn-paneled" id="term-for-internal-play-steps" style="color:initial">media play</span>
     <li><span class="dfn-paneled" id="term-for-nested-browsing-context" style="color:initial">nested browsing context</span>
     <li><span class="dfn-paneled" id="term-for-concept-WorkerGlobalScope-owner-set" style="color:initial">owner set</span>
     <li><span class="dfn-paneled" id="term-for-dom-media-paused" style="color:initial">paused</span>
     <li><span class="dfn-paneled" id="term-for-dom-pagetransitionevent-persisted" style="color:initial">persisted</span>
     <li><span class="dfn-paneled" id="term-for-posted-message-task-source" style="color:initial">posted message task source</span>
     <li><span class="dfn-paneled" id="term-for-current-document-readiness" style="color:initial">readiness</span>
     <li><span class="dfn-paneled" id="term-for-concept-task" style="color:initial">task</span>
     <li><span class="dfn-paneled" id="term-for-top-level-browsing-context" style="color:initial">top-level browsing context</span>
     <li><span class="dfn-paneled" id="term-for-traverse-the-history" style="color:initial">traverse the history</span>
     <li><span class="dfn-paneled" id="term-for-unload-a-document" style="color:initial">unload a document</span>
     <li><span class="dfn-paneled" id="term-for-update-the-rendering" style="color:initial">update the rendering</span>
     <li><span class="dfn-paneled" id="term-for-worklet-agent" style="color:initial">worklet agent</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-list-append" style="color:initial">append</span>
     <li><span class="dfn-paneled" id="term-for-list-iterate" style="color:initial">for each</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
    </ul>
   <li>
    <a data-link-type="biblio">[intersectionobserver]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-calculate-intersection-rect-algo" style="color:initial">compute the intersection of a target element and the root</span>
    </ul>
   <li>
    <a data-link-type="biblio">[service-workers-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-client" style="color:initial">Client</span>
     <li><span class="dfn-paneled" id="term-for-dfn-service-worker-client" style="color:initial">service worker client</span>
    </ul>
   <li>
    <a data-link-type="biblio">[serviceworker]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-create-client-algorithm" style="color:initial">create client</span>
     <li><span class="dfn-paneled" id="term-for-create-windowclient-algorithm" style="color:initial">create window client</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="http://dev.w3.org/csswg/css2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. URL: <a href="http://dev.w3.org/csswg/css2/">http://dev.w3.org/csswg/css2/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-feature-policy-1">[FEATURE-POLICY-1]
   <dd>Ian Clelland. <a href="https://w3c.github.io/webappsec-feature-policy/">Feature Policy</a>. URL: <a href="https://w3c.github.io/webappsec-feature-policy/">https://w3c.github.io/webappsec-feature-policy/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-service-workers-1">[SERVICE-WORKERS-1]
   <dd>Alex Russell; et al. <a href="https://w3c.github.io/ServiceWorker/">Service Workers 1</a>. URL: <a href="https://w3c.github.io/ServiceWorker/">https://w3c.github.io/ServiceWorker/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-page-visibility">[PAGE-VISIBILITY]
   <dd>Jatinder Mann; Arvind Jain. <a href="https://www.w3.org/TR/page-visibility/">Page Visibility (Second Edition)</a>. 29 October 2013. REC. URL: <a href="https://www.w3.org/TR/page-visibility/">https://www.w3.org/TR/page-visibility/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②①"><c- g>Document</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-document-onfreeze" id="ref-for-dom-document-onfreeze①"><c- g>onfreeze</c-></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-document-onresume" id="ref-for-dom-document-onresume①"><c- g>onresume</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-document-wasdiscarded" id="ref-for-dom-document-wasdiscarded②"><c- g>wasDiscarded</c-></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#client" id="ref-for-client②"><c- g>Client</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-clientlifecyclestate" id="ref-for-enumdef-clientlifecyclestate②"><c- n>ClientLifecycleState</c-></a> <a data-readonly data-type="ClientLifecycleState" href="#dom-client-lifecyclestate"><code><c- g>lifecycleState</c-></code></a>;
};

<c- b>enum</c-> <a href="#enumdef-clientlifecyclestate"><code><c- g>ClientLifecycleState</c-></code></a> {
    <a href="#dom-clientlifecyclestate-active"><code><c- s>"active"</c-></code></a>,
    <a href="#dom-clientlifecyclestate-frozen"><code><c- s>"frozen"</c-></code></a>
};

</pre>
  <aside class="dfn-panel" data-for="dom-document-onfreeze">
   <b><a href="#dom-document-onfreeze">#dom-document-onfreeze</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-onfreeze">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-onresume">
   <b><a href="#dom-document-onresume">#dom-document-onresume</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-onresume">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-document-wasdiscarded">
   <b><a href="#dom-document-wasdiscarded">#dom-document-wasdiscarded</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-document-wasdiscarded">3. API</a>
    <li><a href="#ref-for-dom-document-wasdiscarded①">5.2.4. Discarding browsing contexts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="execution-while-not-rendered">
   <b><a href="#execution-while-not-rendered">#execution-while-not-rendered</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-execution-while-not-rendered">4. Feature Policies</a> <a href="#ref-for-execution-while-not-rendered①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="execution-while-out-of-viewport">
   <b><a href="#execution-while-out-of-viewport">#execution-while-out-of-viewport</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-execution-while-out-of-viewport">4. Feature Policies</a> <a href="#ref-for-execution-while-out-of-viewport①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="update-document-frozenness-steps">
   <b><a href="#update-document-frozenness-steps">#update-document-frozenness-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-document-frozenness-steps">5.2.3. Event loop: processing model</a>
    <li><a href="#ref-for-update-document-frozenness-steps①">5.2.6. iframe load event steps</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dedicatedworkerglobalscope-owning-document">
   <b><a href="#dedicatedworkerglobalscope-owning-document">#dedicatedworkerglobalscope-owning-document</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dedicatedworkerglobalscope-owning-document">5.1. Modifications to worklet and worker behavior</a> <a href="#ref-for-dedicatedworkerglobalscope-owning-document①">(2)</a>
    <li><a href="#ref-for-dedicatedworkerglobalscope-owning-document②">5.3.2.1. Get Client Lifecycle State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="htmlmediaelement-resume-frozen-flag">
   <b><a href="#htmlmediaelement-resume-frozen-flag">#htmlmediaelement-resume-frozen-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlmediaelement-resume-frozen-flag">5.4.2. Changing the frozenness of documents</a> <a href="#ref-for-htmlmediaelement-resume-frozen-flag①">(2)</a> <a href="#ref-for-htmlmediaelement-resume-frozen-flag②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-clientlifecyclestate">
   <b><a href="#enumdef-clientlifecyclestate">#enumdef-clientlifecyclestate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-clientlifecyclestate">5.3.1. Client</a> <a href="#ref-for-enumdef-clientlifecyclestate①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-clientlifecyclestate-active">
   <b><a href="#dom-clientlifecyclestate-active">#dom-clientlifecyclestate-active</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-clientlifecyclestate-active">5.3.2.1. Get Client Lifecycle State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-clientlifecyclestate-frozen">
   <b><a href="#dom-clientlifecyclestate-frozen">#dom-clientlifecyclestate-frozen</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-clientlifecyclestate-frozen">5.3.2.1. Get Client Lifecycle State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dfn-service-worker-client-lifecycle-state">
   <b><a href="#dfn-service-worker-client-lifecycle-state">#dfn-service-worker-client-lifecycle-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-service-worker-client-lifecycle-state">5.3.1.1. lifecycleState</a>
    <li><a href="#ref-for-dfn-service-worker-client-lifecycle-state①">5.3.2.2. Create Client</a>
    <li><a href="#ref-for-dfn-service-worker-client-lifecycle-state②">5.3.2.3. Create Window Client</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-serviceworkerclient-lifecyclestate">
   <b><a href="#dom-serviceworkerclient-lifecyclestate">#dom-serviceworkerclient-lifecyclestate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-serviceworkerclient-lifecyclestate">5.3.1.1. lifecycleState</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="get-client-lifecycle-state">
   <b><a href="#get-client-lifecycle-state">#get-client-lifecycle-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-client-lifecycle-state">5.3.1.2. matchAll(options)</a>
    <li><a href="#ref-for-get-client-lifecycle-state①">5.3.1.3. openWindow(url)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-frozenness">
   <b><a href="#document-frozenness">#document-frozenness</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-frozenness">4. Feature Policies</a>
    <li><a href="#ref-for-document-frozenness①">5.2.1. Unloading documents and history traversal</a>
    <li><a href="#ref-for-document-frozenness②">5.4.1. FROZENNESS state</a> <a href="#ref-for-document-frozenness③">(2)</a>
    <li><a href="#ref-for-document-frozenness④">5.4.2. Changing the frozenness of documents</a> <a href="#ref-for-document-frozenness⑤">(2)</a> <a href="#ref-for-document-frozenness⑥">(3)</a> <a href="#ref-for-document-frozenness⑦">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="frozen">
   <b><a href="#frozen">#frozen</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-frozen">2. Page Lifecycle States</a> <a href="#ref-for-frozen①">(2)</a>
    <li><a href="#ref-for-frozen②">4. Feature Policies</a>
    <li><a href="#ref-for-frozen③">5.1. Modifications to worklet and worker behavior</a> <a href="#ref-for-frozen④">(2)</a>
    <li><a href="#ref-for-frozen⑤">5.2.8. Posting messages</a>
    <li><a href="#ref-for-frozen⑥">5.3.2.1. Get Client Lifecycle State</a>
    <li><a href="#ref-for-frozen⑦">5.4.1. FROZENNESS state</a> <a href="#ref-for-frozen⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="unfrozen">
   <b><a href="#unfrozen">#unfrozen</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unfrozen">4. Feature Policies</a>
    <li><a href="#ref-for-unfrozen①">5.2.2. Event loop: definitions</a>
    <li><a href="#ref-for-unfrozen②">5.2.8. Posting messages</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="change-the-frozenness-of-a-top-level-document">
   <b><a href="#change-the-frozenness-of-a-top-level-document">#change-the-frozenness-of-a-top-level-document</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-change-the-frozenness-of-a-top-level-document">5.4.1. FROZENNESS state</a> <a href="#ref-for-change-the-frozenness-of-a-top-level-document①">(2)</a> <a href="#ref-for-change-the-frozenness-of-a-top-level-document②">(3)</a> <a href="#ref-for-change-the-frozenness-of-a-top-level-document③">(4)</a> <a href="#ref-for-change-the-frozenness-of-a-top-level-document④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="change-the-frozenness-of-a-document">
   <b><a href="#change-the-frozenness-of-a-document">#change-the-frozenness-of-a-document</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-change-the-frozenness-of-a-document">4. Feature Policies</a>
    <li><a href="#ref-for-change-the-frozenness-of-a-document①">5.2.1. Unloading documents and history traversal</a> <a href="#ref-for-change-the-frozenness-of-a-document②">(2)</a>
    <li><a href="#ref-for-change-the-frozenness-of-a-document③">5.4.2. Changing the frozenness of documents</a> <a href="#ref-for-change-the-frozenness-of-a-document④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="freeze-steps">
   <b><a href="#freeze-steps">#freeze-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-freeze-steps">2. Page Lifecycle States</a>
    <li><a href="#ref-for-freeze-steps①">5.4.2. Changing the frozenness of documents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="resume-steps">
   <b><a href="#resume-steps">#resume-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resume-steps">5.4.2. Changing the frozenness of documents</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-discarded">
   <b><a href="#document-discarded">#document-discarded</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-discarded">3. API</a>
    <li><a href="#ref-for-document-discarded①">5.2.5. Initialize the document</a>
    <li><a href="#ref-for-document-discarded②">5.4.3. Discarding</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="discarded">
   <b><a href="#discarded">#discarded</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-discarded">2. Page Lifecycle States</a>
    <li><a href="#ref-for-discarded①">5.2.5. Initialize the document</a>
    <li><a href="#ref-for-discarded②">5.2.8. Posting messages</a>
    <li><a href="#ref-for-discarded③">5.4.1. FROZENNESS state</a> <a href="#ref-for-discarded④">(2)</a>
    <li><a href="#ref-for-discarded⑤">5.4.3. Discarding</a> <a href="#ref-for-discarded⑥">(2)</a> <a href="#ref-for-discarded⑦">(3)</a> <a href="#ref-for-discarded⑧">(4)</a> <a href="#ref-for-discarded⑨">(5)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>